<template>
    <div class="ele-body">
      <!-- 搜索表单 -->
      <user-search @search="reload"  />
      <!-- 数据表格 -->
      <el-card shadow="never">
        <ele-pro-table
          ref="table"  row-key="id" :columns="columns" :datasource="datasource" 
          :need-page="true"  @done="onDone"
        >
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
               @click="openEdit({},'1')"
            >
              添加
            </el-button>
            <el-button
              size="small"
              icon="el-icon-upload2"
              class="ele-btn-icon"
              @click="reportexcel"
            >
              导出
            </el-button>
          </template>
          <!-- 标题列 -->
          <template slot="title" slot-scope="{ row }">
            <i :class="row.icon"></i> {{ row.title }}
          </template>
            <!-- 操作列 -->
          <template slot="action" slot-scope="{ row }"  >
            <el-link type="primary"   :underline="false"  icon="el-icon-edit"  @click="openEdit(row,'2')" >修改</el-link>
            <el-popconfirm v-if="row.isSysUser!=1" class="ele-action" title="确定要删除吗？"  @confirm="remove(row)" >
              <el-link type="danger" slot="reference"  :underline="false"  icon="el-icon-delete" >作废</el-link>
            </el-popconfirm>
            <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' class="ele-action"  @confirm="resetPass(row)" title="确定重置密码吗？">
              <el-link type="warning"  :underline="false" slot="reference" icon="el-icon-lock"  >重置密码</el-link>
            </el-popconfirm>

        </template>
        </ele-pro-table>
      </el-card>
   
      <!-- 编辑弹窗 -->
      <user-edit :data="current" :visible.sync="showEdit" @done="reload" :btnindex="btnindex"/>
      <!-- 导出数据 -->
      <ExportDialog ref="ExportDialog"></ExportDialog>
     
    </div>
  </template>
  <script>
      import UserEdit from './components/user-edit';
      import UserSearch from './components/user-search';
      import ExportDialog from '@/components/Excel/ExportDialog'
      import { AllUser,RemoveUser,ResetPassword } from '@/api/usermanager/user';
      export default {
        name: 'User',
        components: {UserEdit,UserSearch,ExportDialog},
        data() {
          return {
            // 表格列配置
            columns: [
              {columnKey: 'index', type: 'index', width: 50, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号',},
              {prop: 'account', label: '账户', showOverflowTooltip: true, sortable: 'account',},
              {prop: 'realName', label: '姓名', showOverflowTooltip: true, sortable: 'realName',},
              {prop: 'sexDesc', label: '性别', showOverflowTooltip: true, align: 'left',sortable: 'sex',},
              {prop: 'phone', label: '手机号', showOverflowTooltip: true, sortable: 'phone',},
              {prop: 'email', label: '邮箱', showOverflowTooltip: true, sortable: 'email',},

              {prop: 'createUserName', label: '创建人', showOverflowTooltip: true, align: 'left',sortable: 'createUserName',},
              {
                prop: 'createDate', label: '创建时间', showOverflowTooltip: true,  align: 'left',sortable: 'createDate',
                formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue,"YYYY-MM-DD");}
              },
              {prop: 'statusDesc', label: '状态', showOverflowTooltip: true, align: 'left',sortable: 'status',},
              {columnKey: 'action', label: '操作', width: 380, align: 'center', resizable: false,slot: 'action', hideInSetting: true, showOverflowTooltip: true}
            ],
            //操作按钮索引
            btnindex: '1',
            // 当前编辑数据
            current: null,
            // 是否显示编辑弹窗
            showEdit: false,
            // 全部账户数据
            accountList: [],
            //二维码是否展示
            ImgUrl:'',
            loading:false,
            // 导出列
            exportList: [
              { name: "账户", keys: "account", status: true },
              { name: "姓名", keys: "realName", status: true },
              { name: "手机号码", keys: "phone", status: true },
              { name: "性别", keys: "sexDesc", status: true },
              { name: '邮箱', label: 'email', status: true, },
              { name: "创建人", keys: "createUserName", status: true },
              { name: "创建时间", keys: "createDate", status: true },
              { name: "状态", keys: "statusDesc", status: true }
            ]
          };
        },
        methods: {
          /* 表格数据源 */
           async datasource(params) {
            params.where.pageindex = params.page;
            params.where.pagesize = params.limit;
           
            //添加排序
            if(params.order.order == null || params.order.order == undefined){
              params.where.orderBys = [{ sort: "createDate", order: 1, }];
            }else{
              params.where.orderBys = [];
              params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
            }
            let data = await AllUser(params.where);
  
            return {
                list:data.items,
                count:data.totalrecords,
            };
          },
    
          /* 表格渲染完成回调 */
          onDone({ data }) {
            // 编辑弹窗编辑完成后 done 事件回传表单数据，使用 Object.assign 赋值给 current 即可修改表格的行数据
            if(this.current) {
                Object.assign(this.current, data);
            }
          },
          /* 刷新表格 */
          reload(where) {
            this.$refs.table.reload({ where: where });
          },
          
          /**
           * 显示编辑
           * @param row 当前行对像
           */
          openEdit(row) {
            this.current = row;
            this.showEdit = true;
            this.btnindex = index;
          },
          resetPass(row){
            const loading = this.$loading({ lock: true });
            ResetPassword(row)
              .then((msg) => {
                loading.close();
                this.$message.success(msg);
                this.reload();
              })
              .catch((e) => {
                loading.close();
                this.$message.error(e.message);
              }); 
          },
          /* 删除 */
          remove(row) {
            const loading = this.$loading({ lock: true });
            RemoveUser(row.id)
              .then((msg) => {
                loading.close();
                this.$message.success(msg);
                this.reload();
              })
              .catch((e) => {
                loading.close();
                this.$message.error(e.message);
              });
          },
          /* 导出 */
          reportexcel(pams) {
            this.$refs.ExportDialog.showEdits = true
            this.$refs.ExportDialog.checkList = this.exportList
            this.$refs.ExportDialog.titleName = "账户列表"
            this.$refs.ExportDialog.dataList = this.$refs.table.tableData;
          }
       
        }
      };
    </script>
    